<template>
	<view class="container">
		<view class="txt">退款商品</view>
		<view class="cart-item">
			<view class="cart-item-img">
				<image :src="orderInfo.image"></image>
			</view>
			<view class="cart-item-word">
				<view class="title-box">
					<text class="title">{{orderInfo.name}}</text>
					<text class="price">￥{{orderInfo.price}}</text>
				</view>
				<view class="sku-box">
					<text>{{orderInfo.props_text}}</text>
				</view>
				<view class="title-box">
					<text class="num">数量:{{orderInfo.num}}</text>
				</view>
			</view>
		</view>


		<view class="section">
			<view class="left">物流状态：</view>
			<picker @change="bindExpressTypePickerChange" :value="expressTypeindex" :range="expressTypeList"
				range-key="name">
				<view class="right">
					<text>{{expressTypeList[expressTypeindex].name}}</text>
					<image src="/static/right2.png"></image>
				</view>
			</picker>
		</view>

		<view class="account">
			<view>请输入退款金额：</view>
			<view class="right">
				<input type="number" name="return_price" @input="returnPriceInput" :value="returnPrice" />
				<text style="font-size: 11px;">最多可退￥{{total_price}}元</text>
			</view>
		</view>


		<view class="row">
			<view class="k">退款类型：</view>
			<radio-group @change="genderChange" class="v">
				<radio style="margin-right: 20rpx;" value='2' checked>仅退款</radio>
				<radio value='3'>退款退货</radio>
			</radio-group>
			<input hidden="true" name="gender" :value="gender" />
		</view>
		<view class="reason-type" @click="handleClickOpen">
			<view class="left">退款原因：</view>
			<view class="right">
				<text>{{returnReason}}</text>
				<image src="/static/right2.png"></image>
			</view>
		</view>
		<view class="note">
			<view>{{returnReasonDetailLength}}/300字</view>
			<textarea class="content" maxlength="300" @input="getReturnReasonDetailLen"
				placeholder-style="font-size:24rpx;" placeholder="请描述具体原因,最多300字..." />
		</view>

		<view class="txt">上传图片（{{images.length}}/9）</view>
		<view class="gallery">
			<view v-if="images.length < 9 && images.length > 0" class="item" @click="chooseImage">
				<view class='addIcon'>+</view>
			</view>
			<view v-else class="item">
				<template v-for="(item, index) in images" v-key="index">
					<image :src="item" @click="previewImage" mode="aspectFill"></image>
					<!-- 删除按钮 -->
					<view class="delete" @click="delete1">X</view>
				</template>
			</view>
			
		</view>

		<view class="order-item-bottom">
			<view class="left"></view>
			<view class="right">
				<view class="query" @click="query">提 交</view>
			</view>
		</view>

		<view class="tui-actionsheet" :class="showActionSheet.show?'tui-actionsheet-show':'tui-actionsheet-none'">
			<view class="actionsheet-title">
				<view class="close" @click="handleClickCancel">
					<image src="/static/close.png"></image>
				</view>
				<view>{{showActionSheet.title}}</view>
			</view>
			<view v-for="(item, index) in showActionSheet.itemList" v-key="index" class="actionsheet-btn-item"
				@click="handleClickItem">
				<text>{{item}}</text>
			</view>
		
		</view>
		<view class="tui-actionsheet-mask" :class="showActionSheet.show?'tui-mask-show':'tui-mask-none'" @click="handleClickCancel"></view>
	</view>

	

</template>

<script>
	import { Check } from '@/utils/model/check-model.js';
	import { Order } from '@/utils/model/order-model.js';
	var check = new Check();
	var order = new Order();
	export default {
		data() {
			return {
				order_item_id: 0,//子订单id order_item中id
				orderInfo: {},
				total_price: 0,
				returnPrice: 0,
				returnType: 2, //0未发起售后、1取消交易 2退款 3退款退货
				returnReason: '请选择',
				showActionSheet: {
					show: false,
					title: '请选择退款原因',
					itemList: ['不想要了', '拍错/多拍', '与商品描述不符', '质量问题', '卖家发错货', '其他'],
					index: 0, //选中退款原因
				},

				returnReasonDetailLength: 0,
				returnReasonDetail: '', //退款详情

				images: [],
				uploadedImages: [],
				//物流状态：0未收到货 1已收到货
				expressTypeList: [{
						type: -1,
						name: '是否收到货'
					}, {
						type: 0,
						name: '未收到货'
					}, {
						type: 1,
						name: '已收到货'
					},
				],
				//expressTypeList: ['是否收到货', '未收到货', '已收到货'],
				expressTypeindex: 0,
			}
		},
		onLoad(options) {
			this.order_item_id = options.id;
		},
		onShow() {
			order.getOrderGoodsInfoById(this.order_item_id, (res) => {
			  console.log(res);
			  console.log('3333333333333333333333333333333')
			  if(res.status == 1){
			    let orderInfo = res.result.orderInfo;
			    let sell_price = Number(orderInfo.sell_price);
			    let num = Number(orderInfo.num);
			    let total_price = sell_price * num;
			    this.setData({
			      orderInfo: orderInfo,
			      total_price: total_price,
			      returnPrice: total_price
			    })
			  }
			})
		},

		methods: {
			bindExpressTypePickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.setData({
					expressTypeindex: e.detail.value
				})
			},
			returnPriceInput(e) {
				this.setData({
					returnPrice: e.detail.value
				})
			},
			genderChange: function(e) {
				console.log('radio发生change事件，携带的value值为：', e.detail.value);
				this.setData({
					returnType: e.detail.value
				})
			},
			getReturnReasonDetailLen: function(e) {
				let that = this;
				let len = e.detail.cursor;
				let returnReasonDetail = e.detail.value;
				that.setData({
					returnReasonDetailLength: len,
					returnReasonDetail: returnReasonDetail
				})
			},

			//---------------------------------退款原因类型 start
			handleClickOpen() {
				this.data.showActionSheet.show = true;
				this.setData({
					showActionSheet: this.data.showActionSheet
				})
			},
			handleClickCancel() {
				this.data.showActionSheet.show = false;
				this.setData({
					showActionSheet: this.data.showActionSheet
				})
			},
			handleClickItem(e) {
				let index = e.currentTarget.dataset.index;
				this.data.showActionSheet.index = index;
				this.data.showActionSheet.show = false;
				this.setData({
					showActionSheet: this.data.showActionSheet,
					returnReason: this.data.showActionSheet.itemList[index]
				})
			},
			//---------------------------------退款原因类型 over

			/** 上传图片 */
			chooseImage: function() {
				var that = this;
				if (that.data.images.length > 8) {
					wx.showToast({
						title: '最多可以上传9张奖品详情图',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				// 选择图片
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					// 可以指定来源是相册还是相机，默认二者都有
					success: function(chooseRes) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						const tempFilePath = chooseRes.tempFilePaths[0];
						console.log(tempFilePath);
						if (tempFilePath && tempFilePath.size > 1024 * 1024) {
							wx.showToast({
								title: '图片不能大于1M',
								icon: 'none'
							})
							return;
						}
						wx.showToast({
							title: '图片检测中...',
							icon: 'none',
							duration: 1000
						})
						check.checkImage(tempFilePath, (checkres) => {
							var res = JSON.parse(checkres);
							console.log(res);
							console.log(
								'aaaaaaaaaaaaaaaaaaaaaaaaaaavvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv')
							if (res.status == 1) {
								var info = res.result.imgSecCheck;
								if (info.errcode == 0) {
									that.setData({
										images: that.data.images.concat(tempFilePath),
										uploadedImages: that.data.uploadedImages.concat(res
											.result.path)
									});
									console.log(that.data.image);
									//wx.showModal({
									//  title: '提示',
									//  content: '上传图片没问题',
									//  success (res) {
									//    if (res.confirm) {
									//      console.log('用户点击确定')
									//    } else if (res.cancel) {
									//      console.log('用户点击取消')
									//    }
									//  }
									//})

								} else if (info.errcode == 87014) { //当图片文件内含有敏感内容，则返回87014
									wx.showModal({
										title: '提示',
										content: '上传图片敏感，重新上传！',
										success(res) {}
									})
								} else {
									//其余错误见返回码说明
									wx.showModal({
										title: '提示',
										content: '检测出错，重新检测！'
									})
								}
							} else {
								wx.showModal({
									title: '提示',
									content: '网络出错，重新检测！'
								})
							}
						})

					}
				})
			},
			// 图片预览
			previewImage(e) {
				//console.log(this.data.images);
				var current = e.target.dataset.src
				wx.previewImage({
					current: current,
					urls: this.data.images
				})
			},
			delete(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var images = that.data.images;
				images.splice(index, 1);
				let uploadedImages = that.data.uploadedImages;
				uploadedImages.splice(index, 1);
				that.setData({
					images: images,
					uploadedImages: uploadedImages
				});
			},
			query(e) {
				let that = this;
				let expressTypeindex = this.data.expressTypeindex;
				let order_goods_id = this.data.id;
				let return_price = this.data.returnPrice;
				let return_reason = this.data.returnReason;
				let return_reason_detail = this.data.returnReasonDetail;
				let uploadedImages = this.data.uploadedImages;
				let return_type = this.data.returnType;
				console.log(return_price);
				console.log(this.data.total_price);
				if (expressTypeindex == 0) {
					wx.showToast({
						title: '请选择物流状态',
						icon: 'none'
					})
					return
				}
				if (return_price > this.data.total_price) {
					wx.showToast({
						title: '超出最大可退金额',
						icon: 'none'
					})
					return
				}
				if (return_reason == '请选择') {
					wx.showToast({
						title: '请选择原因',
						icon: 'none'
					})
					return
				}
				//if(uploadedImages.length == 0){
				//  wx.showToast({
				//    title: '请上传图片',
				//    icon:'none'
				//  })
				//  return
				//}
				let refundInfo = {
					order_goods_id: order_goods_id, //order_goods id
					//order_id: order_id,
					express_type: this.data.expressTypeList[expressTypeindex].type, //物流状态
					return_type: return_type,
					return_price: return_price,
					return_reason: return_reason,
					return_reason_detail: return_reason_detail,
					return_img: uploadedImages.join(',')
				}
				order.refundOrder(refundInfo, (res) => {
					console.log(res);
					console.log('3333333333333333333333333333333')
					if (res.status == 1) {
						wx.showToast({
							title: res.message,
							icon: 'success',
							duration: 1000,
							success: function() {
								setTimeout(function() {
									wx.redirectTo({
										url: '/pages/order/refunddetail?id=' + res
											.result.id
									})
									//  wx.navigateBack({
									//    delta: -1
									//  })
								}, 1000);
								//成功之后跳转退款详情页面
							}
						})
					} else {
						wx.showToast({
							title: res.message,
							icon: 'success',
							duration: 1000
						})
					}
				})

			},

		},
	}
</script>


<style>
	page {
		background-color: #EDEDED;
	}
</style>

<style scoped lang="scss">
	@import '~@/pages/refund/add.scss';
</style>